<template>
	<view class="">
		<!-- 自定义头部 -->
	
		<view class="index">
			<form @submit="formSubmit" @reset="formReset">
				<view class="table">
					<view class="label">
						<input type="text" name="name" v-model="formdata.name" placeholder="请输入驾驶员姓名,与证件一致" placeholder-style="color:#b5b5b5;" :disabled='disabled'>
					</view>
					<view class="label">
						<input type="text" name="card_no" v-model="formdata.card_no" placeholder="请输入驾驶员二代身份证" placeholder-style="color:#b5b5b5;" :disabled='disabled'>
					</view>
					<view class="label">
						<input type="text" name="phone" v-model="formdata.phone" placeholder="请输入手机号,用于接收订单信息" placeholder-style="color:#b5b5b5;" :disabled='disabled'>
					</view>
					<view class="label _flex-row-bet-mid" style="color: #b5b5b5;" @click="upload_image()">
						<view style="font-size: 26rpx;">
							<block v-if="Images.card_a != '' || Images.card_b != '' || Images.car_cert != ''">
								<text style="margin-right: 10rpx;" :style="{color:Images.card_a ? '#000' : ''}">身份证正面照</text>
								<text style="margin-right: 10rpx;" :style="{color:Images.card_b ? '#000' : ''}">身份证反面照</text>
								<text style="margin-right: 10rpx;" :style="{color:Images.car_cert ? '#000' : ''}">驾驶证</text>
							</block>
							<block v-else>
								<text>上传证件照片</text>
							</block>
						</view>
						<view class="iconfont icon-xiangyou"></view>
					</view>
				</view>
				<button class="sub_btn theme-color-bg" form-type="submit">完成</button>
			</form>
			<view class="remark">身份信息存储后加密处理，不会泄露您的个人信息，仅用于租车协议达成</view>
		</view>
	</view>
</template>

<script>
	import { driverQualification, getContactInfo } from '@/api/car.js';
	export default {
		data() {
			return {
				recHeight: '', //状态栏高度
				titleBarHeight: '', //顶部标题栏高度
				MenuButtonHeight: '', //小胶囊高度
				MenuButtonTop: '', //顶部距离
				headerHeight: '', //头部总高度
				shopsListTop: '',

				formdata: {
					id:0,
					name: '',
					card_no: '',
					phone: '',
					card_a:'',
					card_b:'',
					car_cert:'',
					status:'',
				},
				Images:{
					card_a:'',
					card_b:'',
					car_cert:''
				},
				contact_id:0,
				disabled:false,
			}
		},
		onLoad(option) {
			if(option){
				this.contact_id = option.contact_id;
				this.getContactInfo();
			}
			uni.hideTabBar();
			this.MenuButtonHeight = uni.getMenuButtonBoundingClientRect().height; //小胶囊高度
			this.MenuButtonTop = uni.getMenuButtonBoundingClientRect().top; //顶部距离
			this.getPhoneInfo();
		},
		onShow() {

		},
		methods: {
			// 顶部导航栏 配置
			getPhoneInfo() {
				let that = this;
				//小程序 配置
				uni.getSystemInfo({
					success(res) {
						that.recHeight = res.statusBarHeight; //获取状态栏高度
						that.titleBarHeight = (that.MenuButtonHeight + (that.MenuButtonTop - res.statusBarHeight) * 2);
						that.headerHeight = (res.statusBarHeight) + (that.MenuButtonHeight + (that.MenuButtonTop - res.statusBarHeight) * 2);
					}
				})
				const query = uni.createSelectorQuery().in(that);
				query.select('.shops_search').boundingClientRect(data => {}).exec();
			},

			//表单内容提交
			formSubmit: function(e) {
				let formdata = e.detail.value;
				formdata.Image = this.Images;
				let pattern_phone = /((\d{11})|^((\d{7,8})|(\d{4}|\d{3})-(\d{7,8})|(\d{4}|\d{3})-(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d)|(\d{7,8})-(\d{4}|\d{3}|\d{2}|\d))$)/;
				if (formdata.name=='') return this.$util.Tips({
					title: '请输入驾驶员姓名'
				});
				if (formdata.card_no=='') return this.$util.Tips({
					title: '请输入驾驶员二代身份证'
				});
				if (formdata.phone=='') return this.$util.Tips({
					title: '请输入手机号'
				});
				if(!pattern_phone.test(formdata.phone)) return this.$util.Tips({
					title: '手机号格式错误'
				});
				if(this.Images.car_cert!=''&&this.Images.card_a!=''&&this.Images.card_b!=''){
					// uni.navigateBack({
					// 	delta: 1
					// })
				}else {
					return this.$util.Tips({
						title: '请上传证件照片'
					});
				}
				formdata.id = this.contact_id;
				formdata.card_a = this.Images.card_a;
				formdata.card_b = this.Images.card_b;
				formdata.car_cert = this.Images.car_cert;
				uni.showLoading({ title:'提交中...', mask:true });
				driverQualification(formdata).then((res)=>{
					uni.hideLoading();
					uni.showToast({ title:res.msg, icon:'none' })
					setTimeout(()=>{
						uni.navigateBack({
							delta: 1
						});
					},500);
				}).catch((err)=>{
					uni.hideLoading();
					uni.showToast({ title:err, icon:'none' });
					// setTimeout(()=>{
					// 	uni.navigateBack({delta: 1})
					// },1000)
				})
			},

			//表达内容清除
			// formReset:function(e) {

			// },

			//上传照片页面
			upload_image() {
				uni.navigateTo({
					url: '/pages/car_sub/auth/upLoad?Images='+JSON.stringify(this.Images) + '&disabled=' + this.disabled
				})
			},
			// 获取驾驶员详情
			getContactInfo(){
				let that = this;
				getContactInfo({contact_id:that.contact_id}).then((res)=>{
					that.formdata.name = res.data.name;
					that.formdata.card_no = res.data.card_no;
					that.formdata.phone = res.data.phone;
					that.formdata.card_a = res.data.card_a;
					that.formdata.card_b = res.data.card_b;
					that.formdata.car_cert = res.data.car_cert;
					that.formdata.status = res.data.status;
					that.Images.card_a = res.data.card_a??'';
					that.Images.card_b = res.data.card_b??'';
					that.Images.car_cert = res.data.car_cert??'';
					if(res.data.status === 0 || res.data.status === 1){
						that.disabled = true;
					}
				}).catch((err)=>{
					uni.showToast({ title:'信息获取失败', icon:'none' })
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.header_nav {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;

		//顶部导航栏
		.status_bar {
			width: 100%;
			position: fixed;
			z-index: 9;
			background-color: #ffffff;
		}

		.header_title {
			width: 100%;
			position: relative;
			z-index: 999;
			background-color: #ffffff;
		}

		.img {
			position: absolute;
			top: 0;
			z-index: 10;
		}
	}

	.index {
		width: 100%;

		.table {
			width: 100%;
			margin: 22rpx 0rpx;
			padding: 0rpx 20rpx;
			background-color: #ffffff;

			.label {
				width: 100%;
				height: 100rpx;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #f4f4f4;

				&:last-child {
					border-bottom: none;
				}

				input {
					width: 80%;
				}
			}
		}

		.sub_btn {
			width: 652rpx;
			height: 88rpx;
			line-height: 88rpx;
			border-radius: 200rpx;
			// background: linear-gradient(-88.58deg, rgba(98, 98, 98, 1) -0.63%, rgba(16, 16, 16, 1));
			font-size: 32rpx;
			text-align: center;
			color: #ffffff;
			margin: 30rpx auto;
		}

		.remark {
			width: 652rpx;
			font-size: 26rpx;
			color: #999999;
			margin: 0 auto;
		}
	}
</style>
